/**
 *  Created by clz on
 *  Function:
 *  Desc:
 */
import React, {Component} from 'react';
import {Text, ToastAndroid, StyleSheet,View} from 'react-native';
import ScrollableTabView, {ScrollableTabBar, DefaultTabBar} from 'react-native-scrollable-tab-view';
import Screen from "../utiles/Screen";
import SegmentTabBar from './segmentTabBar';
export default class ScrollableTab2 extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <ScrollableTabView
                renderTabBar={() => <SegmentTabBar />}
                onChangeTab={(obj) => {
                    //ToastAndroid.show(obj.i+'',500)
                }}
                onScroll={(position) => {
                    // ToastAndroid.show(position + '', 500)
                }}
                tabBarUnderlineStyle={styles.lineStyle}//设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜 色。
                tabBarBackgroundColor={'yellow'}//设置整个Tab这一栏的背景颜色
                tabBarActiveTextColor={'blue'}//设置选中Tab的文字颜色。
                tabBarInactiveTextColor={'orange'}//设置未选中Tab的文字颜色。
                initialPage={2}
                scrollWithOutAnimation={true}
                locked={false}//表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能“点击”Tab来切换视图
                // tabBarPosition={'Top'}
                >
                <View style={styles.center} tabLabel='娱乐'>
                    <Text style={styles.textStyle}>娱乐</Text>
                </View>
                <View style={styles.center} tabLabel='科技'>
                    <Text style={styles.textStyle}>科技</Text>
                </View>
                <View style={styles.center} tabLabel='军事'>
                    <Text style={styles.textStyle}>军事</Text>
                </View>
                <View style={styles.center} tabLabel='小说'>
                    <Text style={styles.textStyle}>小说</Text>
                </View>
            </ScrollableTabView>
        )
    }
}

const styles = StyleSheet.create({
    lineStyle: {
        width: Screen.width / 4,
        height: 2,
        backgroundColor: '#FF0000',
    },
    textStyle: {
        fontSize: 20,
        marginTop: 20,
        color:'red',
    },
    center: {
        width:Screen.width,
        height:Screen.height,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#FFFFFF'
    },
});
